<template>
    <div class="heat-container">
        <loading :isLoading="loading"/>
        <div class="body">
            <div class="content">
                <div class="box">
                    <div class="top">欢迎使用Ai小助手</div>
                    <div class="show">
                        <div class="message" v-for="all, dex in combinedChatList" :key="dex">
                            <div class="right" v-if="all.right">
                                <div v-if="all.right" class="info">
                                    {{ all.right }}
                                </div>
                                <img v-if="avatar" :src="base_url + avatar" alt="">
                                <img v-else src="../../assets/images/profile.jpg" alt="">
                            </div>
                            <div class="left">
                                <img src="../../assets/images/aislogo.png" alt="">

                                <div class="info">
                                    <vue-markdown>{{all.left}}</vue-markdown>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="input">
                        <textarea name="input" id="1" cols="30" rows="10" v-model="question"
                            placeholder="请输入您的问题"></textarea>
                        <el-button type="primary" plain @click="send(question)">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { aiQuestion } from '../../api/system/ai';
import loading from '../../layout/components/loading.vue';
import Cookies from "js-cookie";
import { getUserInfo } from '../../api/system/user';
import VueMarkdown from 'vue-markdown'
export default {
    components: {
        loading,
        VueMarkdown
    },
    data() {
        return {
            base_url: process.env.VUE_APP_BASE_API,
            navData: [{ name: '热门推荐', path: '/heat' }, { name: 'AI问答', path: '/Ai' }, { name: '景点查询', path: '/query' }, { name: '旅游计划', path: '/plan' }],
            active: 1,
            question: '',
            chatList_right: [],
            chatList_left: [],
            combinedChatList: [{ left: '您好，我是您的AI智能助手。很高兴为您服务，有什么我可以帮助您的吗？', right: null }],
            num: 0,
            loading: false,
            avatar:''
        }
    },
  
    methods: {
        //获取用户信息
        getUserInfo(){
            getUserInfo(Cookies.get('Id')).then(res=>{  
                console.log(res);
                this.avatar = res.data.avatar
            }
            )
        },
        // 发送问题
        send(data) {
            console.log(data);
            this.loading = true
            this.chatList_right.push(data)
            aiQuestion({ question: data, userId: Cookies.get('Id') }).then(res => {
                this.chatList_left.push(res.data)
                const item = { left: this.chatList_left[this.num], right: this.chatList_right[this.num] }
                this.combinedChatList.push(item);
                console.log(this.combinedChatList);
                this.num++
                this.question = ''
                this.loading = false
            })
        },

    },
    created(){
        this.getUserInfo()
    }
}

</script>

<style lang='scss'>
.heat-container {
    margin-top: 50PX;
    display: flex;
    flex-direction: column;
    gap: 100px;
    height: 100vh;

    .active {
        color: rgba($color: #3366FF, $alpha: 1.0) !important;
    }

    .body {
        flex: 0.8;
        display: flex;
        gap: 50px;
        margin: 0 200px;

        .nav-list {
            width: 250px;
            // border: 2px black solid;
            height: 100%;

            .search {
                width: 100%;
                height: 40px;
                margin-bottom: 50px;
                display: flex;
                gap: 20px;

                input {
                    border: 2px rgb(141, 139, 139) solid;
                    padding-left: 10px;
                    box-sizing: border-box;
                    width: 70%;
                    height: 100%;
                    // border: none;
                    border-radius: 5px;

                    outline: none;

                }
            }

            .nav {
                font-size: 20px;
                // text-align: center;
                width: 100px;
                color: gray;
                line-height: 30px;
                height: 30px;

                // border-bottom: 2px black solid;
                // width: 100%;
                &:hover {
                    cursor: pointer;
                    color: rgba($color: #3366FF, $alpha: 1.0) !important;


                }
            }
        }

        .content {
            flex: 1;
            border: 1px white solid;

            background-color: rgba(141, 139, 139, 0.1);
            padding: 20px;
            box-sizing: border-box;

            .box {
                width: 100%;
                height: 100%;
                // border: 1px black solid;
                border-radius: 10px;
                border: 1px solid black;
                background-color: white;
                padding: 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 20px;
                align-items: center;
                .top{
                    font-size:20px;
                    font-weight: 600;
                    width: 100%;
                    height: auto;
                    border-bottom: 1px solid black;
                    // text-align: center;
                    padding: 20px;
                    box-sizing: border-box;
                    text-align: center;
                    // padding:  10px;
                    // box-sizing: border-box;
                }
                .show {
                    width: 100%;
                    height: 500px;
                    // border: 1px rgb(86, 80, 80) solid;
                    padding: 20px;
                    overflow: auto;

                    .message {
                        width: 100%;

                        // border: 2px solid black;
                        display: flex;
                        flex-direction: column;

                        .left {
                            // float: left;
                            width: 80%;
                            padding: 10px;
                            margin: 10px;
                            // width: 45%;
                            height: auto;
                            display: flex;
                            justify-content: flex-start;
                            img{
                                margin-right: 20pX;
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                border: 1px solid black;
                            }
                        }

                        .right {
                            width: 98%;
                            display: flex;
                            justify-content: flex-end;
                            // float: right;
                            padding: 10px;
                            // margin: 10px;    
                            margin-right: 10px;
                            // width: 45%;
                            height: auto;
                            margin-right: 20pX;
                            img{
                                margin-left: 20pX;

                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                border: 1px solid black;
                            }
                            .info {
                            border: 1px solid black;
                            background-color: #296FED !important;
                            padding: 10px;
                            border-radius: 5px;
                            max-width: 60%;
                            color: white !important;

                        }
                        }

                        .info {
                            border: 1px solid black;
                            background-color: #F3F3F3;
                            padding: 10px;
                            border-radius: 5px;
                            max-width: 60%;
                            color: black;

                        }
                    }
                }

                .input {
                    flex: 1;
                    width: 100%;
                    border: 1px rgb(86, 80, 80) solid;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;

                    textarea {
                        width: 100%;
                        height: 80%;
                        border: none;
                        outline: none;
                        resize: none;
                        padding: 10px;
                    }

                    button {
                        width: 200px;
                        margin-right: 20px;
                    }
                }
            }
        }
    }
}
</style>